---
import Header from "../components/Header.astro";
import docLinks from "../../../docs/docLinks";
import Root from "./Root.astro";
import Footer from "../components/Footer.astro";

const pathname = Astro.url.pathname;
---

<Root
  title={Astro.props.title}
  description="The Ferron documentation provides comprehensive information and instructions on how to install, use and configure the Ferron web server."
>
  <Header docLinks={docLinks} />
  <div class="grow flex-1 w-full max-w-360 mx-auto">
    <nav
      class="hidden md:block md:sticky md:float-left w-64 lg:w-80 px-3 top-[calc(var(--spacing,0.25rem)*15+1px)] bottom-0 h-[calc(100vh-var(--spacing,0.25rem)*15-1px)]"
    >
      <ul class="flex flex-col py-2 list-none h-full overflow-y-auto">
        {
          docLinks.map((link) => (
            <li class="block my-1">
              {link.href ? (
                <a
                  data-pagefind-meta={
                    pathname.replace(/\/+$/g, "") == link.href
                      ? "url[href]"
                      : null
                  }
                  href={link.href}
                  target={link.target || "_self"}
                  class={`${link.sub ? "ml-5" : ""} block align-middle ${pathname.replace(/\/+$/g, "") == link.href ? "bg-primary text-primary-foreground" : "text-inherit"} px-2 py-0.75 mx-1 rounded-sm hover:bg-accent/80 hover:text-accent-foreground transition-colors`}
                >
                  {link.label}
                </a>
              ) : (
                <span
                  class={`${link.sub ? "ml-5" : ""} block align-middle text-inherit font-bold px-2 py-0.75 mx-1`}
                >
                  {link.label}
                </span>
              )}
            </li>
          ))
        }
      </ul>
    </nav>
    <main
      class="flex-1 box-content md:ml-64 lg:ml-80 px-4 md:px-2 py-8"
      data-pagefind-body
      data-pagefind-filter="category:Documentation"
    >
      <h1 class="text-4xl md:text-5xl pb-1 md:pb-2 mb-2 font-bold">
        {Astro.props.title}
      </h1>
      <div
        class="prose max-w-full md:prose-lg print:prose-pre:!whitespace-pre-wrap print:prose-pre:!overflow-x-visible"
      >
        <slot />
      </div>
    </main>
  </div>
  <Footer />
</Root>
